<template>
  <view class="container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="logo">
        <uni-text class="logo-text">高考志愿助手</uni-text>
      </view>
    </view>
    <!-- 轮播图 -->
    <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="aspectFill" class="banner-image" />
      </swiper-item>
    </swiper>
    <!-- 搜索区域 -->
    <view class="search-card">
      <view class="search-type">
        <uni-segmented-control :current="searchType" :values="['分数查询', '位次查询']" @clickItem="onTypeChange" />
      </view>
      <view class="province-select" v-if="searchType === 0">
        <uni-data-select v-model="selectedProvince" :localdata="provinces" placeholder="请选择省份" />
      </view>
      <view class="search-input">
        <uni-easyinput v-model="searchValue" type="number" :placeholder="searchType === 0 ? '请输入高考分数' : '请输入高考位次'" />
      </view>
      <button class="search-btn" @click="handleSearch" :loading="isLoading" :disabled="isLoading">
        {{ isLoading ? '查询中...' : '开始查询' }}
      </button>
    </view>
    <!-- 功能区 -->
    <view class="feature-section">
      <view class="feature-item" v-for="(item, index) in features" :key="index" @click="goToNav(item.path)">
        <view class="feature-icon">
          <uni-icons :type="item.icon" size="30" color="#3c9cff" />
        </view>
        <uni-text class="feature-text">{{ item.name }}</uni-text>
      </view>
    </view>
    <!-- 院校列表 -->
    <!-- 筛选区域 -->
    <view class="filter-section" v-if="showList">
      <view class="filter-item">
        <uni-data-select v-model="selectedSchoolProvince" :localdata="provinces" placeholder="选择高校所在地" />
      </view>
      <view class="filter-item">
        <uni-data-select v-model="scoreSort" :localdata="sortOptions" placeholder="分数排序" />
      </view>
    </view>
  </view>

  <view class="scoll-box">
    <scroll-view v-if="showList" class="school-list" scroll-y @scrolltolower="loadMore" refresher-enabled
      @refresherpulling="onPulling" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
      <view v-for="(school, index) in schoolList" :key="index" class="school-card">
        <view class="school-header" @click="toggleSchool(index)">
          <image :src="school.logo" mode="aspectFit" class="school-logo" />
          <view class="school-info">
            <uni-text class="school-name">{{ school.name }}</uni-text>
            <uni-text class="school-stats">{{ school.admissionCount }}人</uni-text>
          </view>
          <uni-icons :type="school.expanded ? 'top' : 'bottom'" size="20" color="#666" />
        </view>
        <view v-if="school.expanded" class="major-list">
          <view v-for="(major, mIndex) in school.majors" :key="mIndex" class="major-item">
            <view class="major-info">
              <uni-text class="major-name">{{ major.name }}</uni-text>
              <view class="major-stats">
                <uni-text class="admission-score">分数线：{{ major.score }}</uni-text>
                <uni-text class="admission-count">录取：{{ major.count }}人</uni-text>
              </view>
            </view>
            <view class="major-tags">
              <uni-tag v-for="(tag, tIndex) in major.tags" :key="tIndex" :text="tag" size="small" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 底部导航栏 -->
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import mData from "../../data"
const searchType = ref(0);
const searchValue = ref('');
const currentTab = ref(0);
const isRefreshing = ref(false);
const selectedProvince = ref('');
const selectedSchoolProvince = ref('');
const scoreSort = ref('');
const showList = ref(false);
const isLoading = ref(false);
const sortOptions = ref([
  { value: 1, text: '分数升序' },
  { value: 2, text: '分数降序' }
]);
const provinces = ref([
  { value: "北京", text: '北京' },
  { value: "上海", text: '上海' },
  { value: "天津", text: '天津' },
  { value: "重庆", text: '重庆' },
  { value: "河北", text: '河北' },
  { value: "山西", text: '山西' },
  { value: "辽宁", text: '辽宁' },
  { value: "吉林", text: '吉林' },
  { value: "黑龙江", text: '黑龙江' },
  { value: "江苏", text: '江苏' },
  { value: "浙江", text: '浙江' },
  { value: "安徽", text: '安徽' },
  { value: "福建", text: '福建' },
  { value: "江西", text: '江西' },
  { value: "山东", text: '山东' },
  { value: "河南", text: '河南' },
  { value: "湖北", text: '湖北' },
  { value: "湖南", text: '湖南' },
  { value: "广东", text: '广东' },
  { value: "海南", text: '海南' },
  { value: "四川", text: '四川' },
  { value: "贵州", text: '贵州' },
  { value: "云南", text: '云南' },
  { value: "陕西", text: '陕西' },
  { value: "甘肃", text: '甘肃' },
  { value: "青海", text: '青海' },
  { value: "台湾", text: '台湾' },
  { value: "内蒙古", text: '内蒙古' },
  { value: "广西", text: '广西' },
  { value: "西藏", text: '西藏' },
  { value: "宁夏", text: '宁夏' },
  { value: "新疆", text: '新疆' },
  // { value: "香港", text: '香港' },
  // { value: "澳门", text: '澳门' }

  // 其他省份数据...
]);
const bannerList = ref([
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/1664d4a7a9d86cb1366a6aa3aa2060d5.jpg'
  },
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/a54c97a50331c701d76af2514088784d.jpg'
  }
]);
const features = ref([
  { name: '院校排名', icon: 'medal', path: '/pages/range/index' },
  { name: '专业解析', icon: 'staff', path: '/pages/analyse/index' },
  { name: '历年分数', icon: 'calendar', path: '/pages/history/index' },
  { name: '报考指南', icon: 'help', path: '/pages/advice/index' }
]);
const schoolList = ref<any[]>([]);

const onTypeChange = (e: any) => {
  searchType.value = e.currentIndex
};
const handleSearch = () => {
  if (!selectedProvince.value) {
    uni.showToast({
      title: '请选择高校所在地',
      icon: 'none'
    })
    return
  }
  if (!searchValue) {
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    })
    return
  }

  isLoading.value = true;
  showList.value = false;


  schoolList.value = mData.schoolList

  // 模拟异步请求
  setTimeout(() => {

    showList.value = true;
    isLoading.value = false;
  }, 3000);
};

const goToNav = (path: string) => {
  uni.navigateTo({
    url: path
  })
}



const reset = () => {
  selectedProvince.value = '';
  searchValue.value = '';

  handleSearch()
}

const toggleSchool = (index: number) => {
  schoolList.value[index].expanded = !schoolList.value[index].expanded;
};
const loadMore = () => {
  // 加载更多数据
};
const onPulling = () => {
  // 处理下拉状态
};
const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
  }, 1000);
};
const switchTab = (index: number) => {
  currentTab.value = index;
};
</script>
<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.banner {
  width: 750rpx;
  height: 300rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.search-card {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-type {
  margin-bottom: 30rpx;
}

.province-select {
  margin-bottom: 20rpx;
}

.search-input {
  margin-bottom: 30rpx;
}

.search-btn {
  background-color: #3c9cff;
  color: #ffffff;
}

.filter-section {
  display: flex;
  padding: 20rpx;
  gap: 20rpx;
  background-color: #ffffff;
  margin: 0 20rpx;
  border-radius: 12rpx;
}

.filter-item {
  flex: 1;
}

.feature-section {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  margin: 0 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon {
  margin-bottom: 10rpx;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-text {
  font-size: 14px;
  color: #666666;
}

.scoll-box {
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.school-list {
  flex: 1;

  overflow: auto;
}

.school-card {
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
}

.school-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.school-logo {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.school-info {
  flex: 1;
}

.school-name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

.school-stats {
  font-size: 14px;
  color: #999999;
}

.major-list {
  padding: 20rpx;
}

.major-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.major-item:last-child {
  border-bottom: none;
}

.major-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.major-name {
  font-size: 14px;
  color: #333333;
}

.major-stats {
  display: flex;
  gap: 20rpx;
}

.admission-score,
.admission-count {
  font-size: 14px;
  color: #666666;
}

.major-tags {
  display: flex;
  gap: 10rpx;
  margin-top: 10rpx;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.tab-text {
  font-size: 12px;
  color: #666666;
  margin-top: 6rpx;
}

.tab-text.active {
  color: #3c9cff;
}
</style>
  